<template>
  <div class="test-component">
    <h1>{{ title }}</h1>
    <p>{{ message }}</p>
    <button @click="handleClick">Click me</button>
  </div>
</template>

<script lang="ts">
  import { defineComponent, ref } from 'vue'

  export default defineComponent({
    name: 'TestComponent',
    setup() {
      const title = ref('Test Component')
      const message = ref(
        'This component is used to test ESLint, Stylelint and Prettier integration.'
      )

      const handleClick = () => {
        message.value = 'Button clicked!'
      }

      return {
        title,
        message,
        handleClick
      }
    }
  })
</script>

<style lang="scss" scoped>
  .test-component {
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 4px;

    h1 {
      color: #333;
      font-size: 24px;
      margin-bottom: 16px;
    }

    p {
      color: #666;
      line-height: 1.5;
      margin-bottom: 16px;
    }

    button {
      background-color: #4caf50;
      color: white;
      border: none;
      padding: 8px 16px;
      border-radius: 4px;
      cursor: pointer;

      &:hover {
        background-color: darken(#4caf50, 10%);
      }
    }
  }
</style>
